<!--
 * @FilePath: EdtiArticle.vue
 * @Author: jack
 * @Date: 2025-03-06 15:48:52
 * @LastEditors: liyin 2179253556@qq.com
 * @LastEditTime: 2025-07-30 11:01:29
 * Copyright: 2025 xxxTech CO.,LTD. All Rights Reserved.
 * @Descripttion: 
-->
<template>
    <div class="edtiArticle">
        <Model :title="editForm.id ? '编辑图片' : '添加图片'" :modelShow="editFormVisible" width="40"
            @cancel="reactCancel(editFormRef)" @confirm="modelConfirm(editFormRef)">
            <el-form label-width="80px" size="default" :rules="editFormRules" :model="editForm" ref="editFormRef">
                <el-form-item label="所属分类" required>
                    <el-select v-model="props.type" disabled style="width:100%;" placeholder="请选择所属分类"
                        :teleported="false">
                        <el-option v-for="(item, index) in typeList" :key="index" :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="图片名称" prop="name">
                    <el-input v-model="editForm.name" placeholder="请输入图片名称" />
                </el-form-item>
                <el-form-item label="上传图片" prop="url">
                    <CropperImage :avatar="editForm.url" @changeImage="changeImage" :needProsess="true" :needCropper="false" :showCloceIcon="false" :isPeviewDel="true" @clearImage="clearImage"
                        :width="120" :height="80" :autoCropWidth="380" :autoCropHeight="230" dir="pic"></CropperImage>
                    <div class="tips">
                        <el-image :src="icon_tishi" width="20"></el-image>
                        建议上传大小为380*230像素（或者它的倍数大小）,上传png/jpeg/jpg等格式
                    </div>
                </el-form-item>
            </el-form>
        </Model>
    </div>
</template>
<script lang="ts" setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { ref, h, onMounted, reactive, watch, toRaw } from 'vue'
import icon_tishi from '../../../assets/images/icon_tishi.png'
import { addPhotos,addXiaobao,addKeyan, editPhotos,editXiaobao,editKeyan } from '../../Api/Publish'
interface PropsType {
    editFormVisible: boolean
    typeList?: any
    type?: string
}
const props = withDefaults(defineProps<PropsType>(), {
    editFormVisible: true,
    typeList: [],
    type: ''
})
interface EmitType {
    (e: 'modelCancel'): void
    (e: 'getList'): void
}
const emit = defineEmits<EmitType>()
// 旧数据更新数据作比较
const editForm = reactive<any>({
    id: '',
    name: '',
    url: ''
})
const editFormRef = ref<FormInstance>()
const editFormRules = reactive<FormRules>({
    name: [{ required: true, message: '请输入图片名称', trigger: 'blur' }],
    url: [{ required: true, message: '请上传图片', trigger: 'blur' }],
})
const changeImage = (res: any) => {
    editForm.url = res.inch
}
const clearImage = () => {
    editForm.url = ''
}
// 点击保存
const modelConfirm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate(async (valid: any) => {
        if (valid) {
            const params: any = {
                name: editForm.name,
                url: editForm.url
            }
            if (editForm.id) {
                params.id = editForm.id
            }
            if(editForm.id){
                const res: any = Number(props.type)===1? await editPhotos(params) :Number(props.type)===2? await editXiaobao(params):await editKeyan(params)
                if (res.code !== 1) return ElMessage.error(res.msg)
                ElMessage.success(res.msg)
            } else {
                let arr=[]
                arr.push(params)
                const res: any = Number(props.type)===1? await addPhotos({imgs:arr}) :Number(props.type)===2? await addXiaobao({imgs:arr}):await addKeyan({imgs:arr})
                if (res.code!== 1) return ElMessage.error(res.msg)
                ElMessage.success(res.msg)
            }           
            emit('getList')
            emit('modelCancel')
            reactCancel(editFormRef.value)
        } else {
            console.log('error submit!')
        }
    })
}
const reactCancel = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    emit('modelCancel')
    formEl.resetFields()
}
onMounted(() => {
})
defineExpose({ editForm })
</script>
<style lang="scss" scoped>
.tips {
    width: 100%;
    display: flex;
    font-size: 12px;
    align-items: center;
    line-height: 20px;
    margin-top: 5px;

    .el-image {
        display: flex;
        align-items: center;
        margin-right: 5px;
        margin-top: 3px;
    }
}
</style>